<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<div class="search-box" style="text-align: right">
				<el-form :inline="true" :model="searchForm" class="demo-form-inline">
					<el-form-item label="时间筛选">
						<el-date-picker
							v-model="searchForm.time"
							type="daterange"
							value-format="YYYY-MM-DD"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="census-card">
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-view" style="color: #1890ff"></i>
						商品浏览量
					</div>
					<div class="item-body">{{ censusData.goods_views }}</div>
					<div class="item-footer">
						环比增长：{{ growData.goods_views_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.goods_views_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-s-custom" style="color: #00c050"></i>
						商品访客数
					</div>
					<div class="item-body">{{ censusData.visitor_num }}</div>
					<div class="item-footer">
						环比增长：{{ growData.visitor_num_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.visitor_num_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-shopping-cart-1" style="color: #ffab2b"></i>
						加购件数
					</div>
					<div class="item-body">{{ censusData.add_cart_num }}</div>
					<div class="item-footer">
						环比增长：{{ growData.add_cart_num_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.add_cart_num_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-tickets" style="color: #b37feb"></i>
						下单件数
					</div>
					<div class="item-body">{{ censusData.order_num }}</div>
					<div class="item-footer">
						环比增长：{{ growData.order_num_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.order_num_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-s-order" style="color: #1890ff"></i>
						支付件数
					</div>
					<div class="item-body">{{ censusData.pay_num }}</div>
					<div class="item-footer">
						环比增长：{{ growData.pay_num_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.pay_num_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
			</div>
			<div class="census-card">
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-money" style="color: #1890ff"></i>
						支付金额
					</div>
					<div class="item-body">{{ censusData.pay_amount }}</div>
					<div class="item-footer">
						环比增长：{{ growData.pay_amount_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.pay_amount_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-money" style="color: #00c050"></i>
						成本金额
					</div>
					<div class="item-body">{{ censusData.cost_amount }}</div>
					<div class="item-footer">
						环比增长：{{ growData.cost_amount_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.cost_amount_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-money" style="color: #ffab2b"></i>
						退款金额
					</div>
					<div class="item-body">{{ censusData.refund_amount }}</div>
					<div class="item-footer">
						环比增长：{{ growData.refund_amount_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.refund_amount_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-tickets" style="color: #b37feb"></i>
						退款件数
					</div>
					<div class="item-body">{{ censusData.refund_num }}</div>
					<div class="item-footer">
						环比增长：{{ growData.refund_num_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c" v-if="growData.refund_num_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
				<div class="census-item">
					<div class="item-title">
						<i class="el-icon-refresh" style="color: #1890ff"></i>
						访客-支付转化率
					</div>
					<div class="item-body">
						{{ censusData.visitor_pay_ratio }}%
					</div>
					<div class="item-footer">
						环比增长：{{ growData.visitor_pay_ratio_per }}%
						<i class="el-icon-caret-top" style="color: #f56c6c"
						   v-if="growData.visitor_pay_ratio_per > 0"></i>
						<i class="el-icon-caret-bottom" style="color: #67c23a" v-else></i>
					</div>
				</div>
			</div>

			<div style="width: 100%; height: 400px; padding: 10px 0 10px 0">
				<scEcharts height="400px" :option="orderRank"></scEcharts>
			</div>
		</el-card>

		<el-card shadow="never" style="margin-top: 10px">
			<template #header>
				<div class="card-header">
					<span>商品排行</span>
				</div>
			</template>
			<div class="search-box" style="text-align: right">
				<el-form :inline="true" :model="searchForm2" class="demo-form-inline">
					<el-form-item label="统计类型">
						<el-select v-model="searchForm2.type" placeholder="请选择活动区域">
							<el-option label="浏览量" value="views"></el-option>
							<el-option label="访客数" value="visitor_num"></el-option>
							<el-option label="加购数" value="add_cart_num"></el-option>
							<el-option label="下单数" value="order_num"></el-option>
							<el-option label="支付数" value="pay_num"></el-option>
							<el-option label="支付金额" value="pay_amount"></el-option>
							<el-option label="毛利率" value="gross_margin"></el-option>
							<el-option label="收藏数" value="collection_num"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="时间筛选">
						<el-date-picker
							v-model="searchForm2.time"
							type="daterange"
							value-format="YYYY-MM-DD"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit2" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="商品图片" width="180">
					<template #default="scope">
						<img :src="scope.row.img" style="height: 50px; width: 50px"/>
					</template>
				</el-table-column>
				<el-table-column prop="goods_name" label="商品名称">
				</el-table-column>
				<el-table-column prop="views" label="浏览量"></el-table-column>
				<el-table-column prop="visitor_num" label="访客数">
				</el-table-column>
				<el-table-column prop="add_cart_num" label="加购件数">
				</el-table-column>
				<el-table-column prop="order_num" label="下单件数">
				</el-table-column>
				<el-table-column prop="pay_num" label="支付件数">
				</el-table-column>
				<el-table-column prop="pay_amount" label="支付金额">
				</el-table-column>
				<el-table-column prop="gross_margin" label="毛利率(%)">
				</el-table-column>
				<el-table-column prop="collection_num" label="收藏数">
				</el-table-column>
				<el-table-column prop="visitor_pay_ratio" label="访客-支付转化率(%)">
				</el-table-column>
			</el-table>
		</el-card>
	</el-main>
</template>

<script>
import scEcharts from "@/components/scEcharts";

export default {
	name: "census_goods",
	components: {
		scEcharts,
	},
	data: function () {
		return {
			tableData: [],
			searchForm: {
				time: "",
			},
			searchForm2: {
				time: "",
				type: "views",
			},
			censusData: [],
			growData: [],
			orderRank: {},
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		// 获取列表
		async getList() {
			let res = await this.$API.census.goods.get(this.searchForm);

			this.searchForm.time = res.data.selectData.time;
			this.censusData = res.data.selectData.returnData;
			this.lineData = res.data.selectData.lineData;
			this.growData = res.data.growData;

			this.$nextTick(() => {
				this.initGoodsList();
			});

			this.getRankList();
		},
		// 获取排行榜
		async getRankList() {
			let res = await this.$API.census.rank.get(this.searchForm2);
			this.searchForm2.time = res.data.time;
			this.tableData = res.data.list;
		},
		onSubmit() {
			this.getList();
		},
		onSubmit2() {
			this.getRankList();
		},
		// 订单数据
		initGoodsList() {
			this.orderRank = {
				legend: {
					data: ["商品浏览量", "商品访客量", "支付金额", "退款金额"],
				},
				grid: {
					left: "2%",
					right: "2%",
					bottom: "3%",
					containLabel: true,
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "line",
					},
				},
				xAxis: {
					type: "category",
					data: this.lineData.timeLine,
					axisLine: {
						show: false,
					},
				},
				yAxis: {
					type: "value",
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
				},
				series: [
					{
						name: "商品浏览量",
						tooltip: {
							valueFormatter: (value) =>
								"商品浏览量：" + value + "次",
						},
						data: this.lineData.goodsViews,
						type: "line",
						lineStyle: {
							smooth: true,
						},
					},
					{
						name: "商品访客量",
						tooltip: {
							valueFormatter: (value) =>
								"商品访客量：" + value + "人",
						},
						data: this.lineData.goodsVisit,
						type: "line",
						barWidth: "40%",
						lineStyle: {
							smooth: true,
						},
						itemStyle: {
							opacity: 0.8,
						},
					},
					{
						name: "支付金额",
						tooltip: {
							valueFormatter: (value) =>
								"支付金额：" + value + "元",
						},
						data: this.lineData.payAmount,
						type: "line",
						barWidth: "40%",
						lineStyle: {
							smooth: true,
						},
						itemStyle: {
							opacity: 0.8,
						},
					},
					{
						name: "退款金额",
						tooltip: {
							valueFormatter: (value) =>
								"退款金额：" + value + "元",
						},
						data: this.lineData.refundAmount,
						type: "line",
						barWidth: "40%",
						lineStyle: {
							smooth: true,
						},
						itemStyle: {
							opacity: 0.8,
						},
					},
				],
			};
		},
	},
};
</script>

<style scoped>
.census-card {
	width: 100%;
	height: 180px;
	display: flex;
}

.census-card .census-item {
	height: 180px;
	width: 20%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.census-item .item-title {
	color: #666;
}

.census-card .census-item .item-body {
	font-weight: 400;
	font-size: 30px;
	margin-top: 5px;
}

.census-card .census-item .item-footer {
	margin-top: 5px;
	color: #666;
}
</style>
